<template>
	<view class="oil">
		<view class="oilwrap">
			<view class="top" @click="routerPush(`/pages/equipment/main?props=${2}&id=${2}`)">
				<image src="../../static/huoyou.png" class="img"></image>
				<image src="../../static/huoyou.png" class="img"></image>
				<image src="../../static/huoyou.png" class="img"></image>
				<image src="../../static/huoyou.png" class="img"></image>
				<view style="position: absolute;top:46%;left: 10%; width: 85%; display: flex;justify-content: space-between;padding: 0 2.7%;box-sizing: border-box;">
					<lightradius v-if="Lighthyb(hybData(606, 0, 2))" :isBlinking="false"></lightradius>
					<lightradius v-if="!Lighthyb(hybData(606, 0, 2))" :isBlinking="true" style="visibility: hidden;"></lightradius>
					<lightradius v-if="Lighthyb(hybData(606, 1, 2))" :isBlinking="false"></lightradius>
					<lightradius v-if="!Lighthyb(hybData(606, 1, 2))" :isBlinking="true" style="visibility: hidden;"></lightradius>
					<lightradius v-if="Lighthyb(hybData(606, 2, 2))" :isBlinking="false"></lightradius>
					<lightradius v-if="!Lighthyb(hybData(606, 2, 2))" :isBlinking="true" style="visibility: hidden;"></lightradius>
					<lightradius v-if="Lighthyb(hybData(630, 2, 2))" :isBlinking="false"></lightradius>
					<lightradius v-if="!Lighthyb(hybData(630, 0, 2))" :isBlinking="true" style="visibility: hidden;"></lightradius>
					
				</view>
			</view>
			<view class="bottom">
				<!-- 左 -->
				<cargooil left="54%" top="2%" flex="row" 
				    :value="Number(hycywDataList?.z553?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z552?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z549?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z551?.currentValue))" 
				    :w="Number(hycywDataList?.z550?.currentValue)">
				</cargooil>
				
				<cargooil left="54%" top="20%" flex="row" 
				    :value="Number(hycywDataList?.z541?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z540?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z537?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z539?.currentValue))" 
				    :w="Number(hycywDataList?.z538?.currentValue)">
				</cargooil>
				
				<cargooil left="54%" top="39%" flex="row" 
				    :value="Number(hycywDataList?.z529?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z528?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z525?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z527?.currentValue))" 
				    :w="Number(hycywDataList?.z526?.currentValue)">
				</cargooil>
				
				<cargooil left="54%" top="59%" flex="row" 
				    :value="Number(hycywDataList?.z517?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z516?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z513?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z515?.currentValue))" 
				    :w="Number(hycywDataList?.z514?.currentValue)">
				</cargooil>
				
				<cargooil left="54%" top="78%" flex="row" 
				    :value="Number(hycywDataList?.z505?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z504?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z501?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z503?.currentValue))" 
				    :w="Number(hycywDataList?.z502?.currentValue)">
				</cargooil>
				
				<cargooil left="54%" top="90%" flex="row" 
				    :value="Number(hycywDataList?.z565?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z564?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z561?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z563?.currentValue))" 
				    :w="Number(hycywDataList?.z562?.currentValue)">
				</cargooil>
				
				<!-- 右 -->
				<cargooil left="16%" top="2%" 
				    :value="Number(hycywDataList?.z559?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z558?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z555?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z557?.currentValue))" 
				    :w="Number(hycywDataList?.z556?.currentValue)">
				</cargooil>
				
				<cargooil left="16%" top="20%" 
				    :value="Number(hycywDataList?.z547?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z546?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z543?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z545?.currentValue))" 
				    :w="Number(hycywDataList?.z544?.currentValue)">
				</cargooil>
				
				<cargooil left="16%" top="39%" 
				    :value="Number(hycywDataList?.z535?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z534?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z531?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z533?.currentValue))" 
				    :w="Number(hycywDataList?.z532?.currentValue)">
				</cargooil>
				
				<cargooil left="16%" top="59%" 
				    :value="Number(hycywDataList?.z523?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z522?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z519?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z521?.currentValue))" 
				    :w="Number(hycywDataList?.z520?.currentValue)">
				</cargooil>
				
				<cargooil left="16%" top="78%" 
				    :value="Number(hycywDataList?.z511?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z510?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z507?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z509?.currentValue))" 
				    :w="Number(hycywDataList?.z508?.currentValue)">
				</cargooil>
				
				<cargooil left="16%" top="90%" 
				    :value="Number(hycywDataList?.z571?.currentValue)"
				    :t="Number(MathValueFormat(hycywDataList?.z570?.currentValue, 10))"
				    :h="Number(MathValueFormat(hycywDataList?.z567?.currentValue, 100))"
				    :b="Number(HEXtoDECSymbol(hycywDataList?.z569?.currentValue))" 
				    :w="Number(hycywDataList?.z568?.currentValue)">
				</cargooil>
			</view>
		</view>
	    <view style="margin-top:10%;text-align: center;">
			<span style="font-size: 20px">货油总立方数</span>
						:{{ MathValueFormat(hycywDataList?.z573?.currentValue, 10) }}m³
		</view>
	<view class="btn">
		<u-button type="warning " text="货油泵" @click="routerPush(`/pages/equipment/main?props=${2}&id=${2}`)"></u-button>
		<u-button type="success " text="货油主机" @click="routerPush(`/pages/equipment/main?props=${2}&id=${3}`)"></u-button>
	</view>
	</view>
	
</template>

<script setup>
	import cargooil from '@/components/cargooil.vue'
	import lightradius from "@/components/lightradius.vue"
		import { routerPush } from "@/plugins/index.js";
	import {
		HEXtoDECSymbols
	} from '@/utils/utils.js'
	import {
		ref,
		inject,
		computed,
		watch
	} from 'vue';
	let allData = inject('allData')
	let hycywDataList = ref({})
	let pumpDataList = ref(null)
	const MathValueFormat = computed(() => {
		return (m, divisor = 10) => {
			let num = m ?? 0
			let baseNumber = Math.log10(divisor)
			return (Number(num) / Number(divisor)).toFixed(baseNumber)
		}
	})
	const HEXtoDECSymbol = computed(() => {
		return (m, divisor) => {
			if (!Number(m)) {
				return 0
			}
			return HEXtoDECSymbols(m, divisor)
		}
	})
	let hybData = computed(() => {
		return (sort, index, n) => {
			let sorts = 'z' + (sort + index * 8)
			if (!pumpDataList.value) return initDecimalPlaces(n)
			return pumpDataList?.value[sorts]?.currentValue || initDecimalPlaces(n)
		}
	})
	const Lighthyb = computed(() => {
		return (value) => {
			return value > 3 ? true : false
		}
	})
	watch(
		() => allData.value,
		(newVal, oldVal) => {
			let pumpInitData = newVal.hyb || {}
			pumpDataList.value = pumpInitData
		},
		{
			deep: true
		}
	)
	watch(
		() => allData.value,
		(newVal, oldVal) => {
			hycywDataList.value = newVal.hycyw
		}, {
			deep: true
		}
	)
	
</script>

<style scoped lang="scss">
	.oil {
		background-color: rgb(45, 73, 97);
		color: rgb(64, 158, 255);
		padding: 10rpx 10rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;

		.oilwrap {
			width: 60%;
			height: 82%;
			margin: 0 auto;

			.top {
				position: relative;
				width: 100%;
				height: 12%;

				.img {
					width: 25%;
					height: 100%;
				}
			}

			.bottom {
				position: relative;
				width: 100%;
				height: 90%;
				background: url('@/static/hyqt.png') no-repeat;
				background-size: 100% 100%;
				background-position: center center;
			}

		}
	}
	.btn {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		padding: 10rpx;
		&>* {
			margin: 0 20rpx;
		}
	}
</style>